{{#system}}
  <div class="span6" data-model="true" {{data 'model'}}>
    <div class="inner-system">
      <div class="row-fluid response-title-bar">
        <div class="span6">
          <h4>
            <i class="grcicon-{{system_or_process}}-color" rel="tooltip" data-placement="top" title="{{system_or_process_capitalized}}"></i>
            {{#if absolute_url}}
              <strong class="text-compliance"><a data-popover-trigger="sticky-hover" data-sticky-popover="true" data-content="{{render '/assets/pbc/iframe_tooltip.mustache'}}" href="{{absolute_url}}" target="_blank">
                {{{withattr "data-original-title" "<div class='row-fluid'><div class='span12'><h3><i class='grcicon-{system_or_process}-color'></i> Viewing {title} </span> </h3></div></div>"}}}
                {{title}}
              </a></strong>
            {{else}}
              <strong class="text-compliance">{{title}}</strong>
            {{/if}}

          </h4>
        </div>
        <div class="span6">
          <div class="pull-right">
            <a class="btn btn-mini system-edit" data-toggle="modal-ajax-form" href="/systems/{{id}}/edit" data-modal-reset="reset" data-model-class="modal-wide" title="Edit {{system_or_process_capitalized}}" rel="tooltip" data-placement="top">
              <i class="grcicon-edit"></i>
            </a>          
            <a class="btn btn-mini" href="/systems/{{id}}" title="View {{system_or_process_capitalized}}" rel="tooltip" data-placement="top">
              <i class="grcicon-goto"></i>
            </a>
            <a class="btn btn-mini remove-system" href="javascript://" title="Remove {{system_or_process_capitalized}} from Response" rel="tooltip" data-placement="top">
              <i class="grcicon-x-grey"></i>
            </a>

          </div>
          <span class="pbc-counter {{^object_people.length}} empty{{/object_people.length}}">
            <i class="grcicon-user-black"></i>
            {{object_people.length}}
          </span>
          <span class="pbc-counter {{^object_documents.length}} empty{{/object_documents.length}}">
            <i class="grcicon-link"></i>
            {{object_documents.length}}
          </span>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span6">
          <h5>Description</h5>
          <div class="rtf">
            {{{with_line_breaks description}}}
          </div>
        </div>
        <div class="span6">
          <h5>People</h5>
          <ul class="items pbc-item-list">
            {{#object_people}}
            <li {{data 'model'}} data-model="true">
              <div class="row-fluid">
                <div class="span7">
                  <a class="inner-element" target="_blank" href="mailto:{{firstnonempty person.email}}">
                    <span rel="tooltip" title="{{firstnonempty person.email 'No LDAP'}}">
                      {{firstnonempty person.name person.email}}
                    </span>
                  </a>
                </div>
                <div class="span4">
                  <select class="edit-person-role">
                    <option value="responsible" {{#if_equals role 'responsible'}}selected="true"{{/if_equals}}>Responsible</option>
                    <option value="accountable" {{#if_equals role 'accountable'}}selected="true"{{/if_equals}}>Accountable</option>
                  </select>
                </div>
                <div class="span1">
                  <a class="btn btn-mini remove_person" rel="tooltip" title="Remove from {{system_or_process}}" href="javascript://">
                    <i class="grcicon-x-grey"></i>
                  </a>
                </div>
              </div>
            </li>
            {{/object_people}}
            <li class="inline-editing inline-add-person hide" data-system-id="{{id}}">
              <form>
                <div class="row-fluid">
                  <div class="span7">
                    <input class="input-block-level input-ldap" name="ldap" placeholder="Email or name" type="text" {{ (el) -> el.pbc_autocomplete_people() }}>
                  </div>
                  <div class="span5">
                    <a class="btn btn-mini pull-left add-person hide" data-modal-reset="reset" data-toggle="modal-ajax-form" href="/people/new" data-target="#ajax-modal-people-new">
                      <i class="grcicon-add-black"></i>
                    </a>
                  </div>
                </div>
              </form>
            </li>
            <li class="toggle-add-person add-new">
              <span>
                <a class="btn btn-mini btn-add" href="javascript://">
                  <i class="grcicon-add"></i>
                  Person
                </a>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span6">
          <h5>Notes</h5>
          <div class="rtf">
            {{{with_line_breaks notes}}}
          </div>

        </div>
        <div class="span6">
          <h5>References</h5>
          <ul class="items pbc-item-list">
            {{> /assets/pbc/documents_list.mustache}}
            <li class="toggle-add-document add-new" data-system-id="{{id}}">
              <span>
                <a class="btn btn-mini btn-add" href="javascript://">
                  <i class="grcicon-add"></i>
                  Reference
                </a>
              </span>
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>
{{/system}}
